/* 回款确认 */
<template>
  <div class="returnConfirm">
    <div class="filter">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="城市：">
          <el-select v-model="cityId" placeholder="请选择城市" size="mini" clearable filterable @change="getCityId">
            <el-option :label="item.city" :value="item.cityId" v-for="(item,idx) in cityList" :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼盘：">
          <el-select v-model="devId" placeholder="请选择楼盘" size="mini" clearable filterable>
            <el-option :label="item.devName" :value="item.devId" v-for="(item,idx) in devList" :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-select v-model="auditId" placeholder="" size="mini">
            <el-option :label="item.name" :value="item.id" v-for="(item,idx) in auditStatusList" :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送状态：">
          <el-select v-model="pushFlagId" placeholder="" size="mini">
            <el-option :label="item.name" :value="item.id" v-for="(item,idx) in pushFlagList" :key="idx"></el-option>
          </el-select>
        </el-form-item><br>
        <el-form-item label="批次号：">
          <el-input v-model="batchCode" placeholder="请输入批次号" size="mini"></el-input>
        </el-form-item>
        <div style="display:inline-block">
          <span class="search-bar-name" style="font-size:14px;color:#606266">申请时间：</span>
          <el-date-picker
            style="margin-top:5px"
            v-model="timeSpecial"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="changeTime"
            size="mini">
          </el-date-picker>
        </div>
        <el-form-item style="margin-top:-2px;margin-left:10px;">
          <el-button type="primary" @click="checkList" size="mini" id="monitorEnter">查询</el-button>
          <el-button type="primary" @click="handleAdd" size="mini" v-if="roleName == '运营人员' || roleName == '项目助理'" >新建批次</el-button>
          <el-button type="primary" @click="handlePush" size="mini" v-if="roleName == '财务'" >推送</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table :data="listData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column align="center" fixed type='selection' width="55" :selectable='isSelectable'></el-table-column>
        <el-table-column align="center" fixed  label="序号" type="index" min-width="60"></el-table-column>
        <el-table-column align="center" prop="cityName" label="城市" min-width="150"></el-table-column>
        <el-table-column align="center" prop="devName" label="楼盘名称" min-width="300"></el-table-column>
        <el-table-column align="center" prop="batchCode" label="批次号" min-width="200"></el-table-column>
        <el-table-column align="center" prop="orderNum" label="订单数" min-width="120"></el-table-column>
        <el-table-column align="center" prop="brokerageAmountPaid" label="本次回款" min-width="120"></el-table-column>
        <el-table-column align="center" prop="auditStatus" label="审核状态" min-width="120">
          <template slot-scope="scope">
            <span v-show="scope.row.auditStatus == 0">待提交</span>
            <span v-show="scope.row.auditStatus == 1">待审核</span>
            <span v-show="scope.row.auditStatus == 2">开发商通过审核</span>
            <span v-show="scope.row.auditStatus == 3">开发商审核拒绝</span>
            <span v-show="scope.row.auditStatus == 4">财务审核通过</span>
            <span v-show="scope.row.auditStatus == 5">财务审核拒绝</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="submitPersonName" label="提交人" width="150"></el-table-column>
        <el-table-column align="center" prop="createTime" label="提交时间" width="180"></el-table-column>
        <el-table-column align="center" prop="pushFlag" label="推送状态" width="180">
          <template slot-scope="scope">
            <span v-show="scope.row.pushFlag == 0">待推送</span>
            <span v-show="scope.row.pushFlag == 1">成功</span>
            <span v-show="scope.row.pushFlag == 2">失败</span>
            <span v-show="scope.row.pushFlag == 3">部分成功</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleDetail(1,scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleDetail(2,scope.row)" type="text" size="small" :disabled="scope.row.auditStatus == 0 || scope.row.auditStatus == 5? false:true" v-if="roleName == '运营人员' || roleName == '项目助理'">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="text" size="small" :disabled="scope.row.auditStatus == 0 || scope.row.auditStatus == 5? false:true" v-if="roleName == '运营人员' || roleName == '项目助理'">删除</el-button>
            <el-button @click="handleDetail(3,scope.row)" type="text" size="small"  v-if="roleName == '财务'" :disabled="scope.row.auditStatus == 1?false:true">审核</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" width="150" label="金蝶推送查看">
          <template slot-scope="scope">
            <el-button class="tag-read" @click="handleCheck(scope.row)" type="text" size="small" :disabled="!scope.row.pushFlag?true:false">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiPath"
import util from '@/common/utils'
import Clipboard from  'clipboard'
export default {
  name:"returnConfirm",
  title: '回款确认',
  components: {},
  data() {
    return {
      roleName:JSON.parse(window.sessionStorage.getItem('cmsUser')).roleName,
      totalSize:0,
      pageData:{
        pageNum:1,
        pageSize:10
      },
      listData: [],
      auditStatusList:[
        {name:'全部',id:''},
        {name:'待提交',id:0},
        {name:'待审核',id:1},
        {name:'财务审核通过',id:4},
        {name:'财务审核拒绝',id:5},
      ],
      auditId:'',
      pushFlagList:[
        {name:'全部',id:''},
        {name:'待推送',id:0},
        {name:'成功',id:1},
        {name:'失败',id:2},
      ],
      pushFlagId:'',
      cityList:[],
      cityId:'',
      devList:[],
      devId:'',
      batchCode:'',
      batchCodeList:[],
      timeSpecial: ['',''],
      idKey: "batchCode",
      multipleSelection: [],
      multipleSelectionAll:[],
    }
  },
  created() {
    this.getCityList()
    this.getDevList()
    this.orderList()
  },
  activated(){
    this.getCityList()
    this.getDevList()
    this.orderList()
  },
  mounted() {},
  methods: {
    checkList(){
      this.pageData.pageNum = 1
      this.orderList()
    },
    changeTime(val){
      if(val){
        this.strDate = val[0]
        this.endDate = val[1]
      }else{
        this.strDate = undefined
        this.endDate = undefined
      }
    },
    // 记忆选择核心方法
    changePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      let idKey = this.idKey;
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      // if (this.multipleSelectionAll.length <= 0) {
      //   this.multipleSelectionAll = this.multipleSelection;
      //   console.log(this.multipleSelectionAll)
      //   return;
      // }
      this.multipleSelectionAll = this.multipleSelection;
      console.log(this.multipleSelectionAll)
      // 总选择里面的key集合
      let selectAllIds = [];
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      console.log('总选择的key', selectAllIds)
      this.batchCodeList = [];
      // 获取当前页选中的id
      this.multipleSelection.forEach(row => {
        this.batchCodeList.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row);
        }
      });
      console.log('当前也的选中id',this.batchCodeList)
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.listData.forEach(row => {
        if (this.batchCodeList.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.multipleSelectionAll.length; i++) {
            if (that.multipleSelectionAll[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    // 是否可选
    isSelectable(row,index){
      if(row.pushFlag == 0){
        return true
      }else{
        return false
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
      setTimeout(()=>{
        this.changePageCoreRecordData()
      },500)
    },
    // 推送
    handlePush(){
      console.log(this.batchCodeList)
      this.axios.post(api.requestSKDApi,{
        pushType:3,
        requestCodes:this.batchCodeList
      }).then(res=>{
        console.log(res)
        if(res.data.code == 200){
          this.$message({
            type:'success',
            message:'推送成功'
          })
          this.orderList()
        }
      })
    },
    // 查看详情-编辑-审核
    handleDetail(val,row){
      window.sessionStorage.setItem('returnConfirmCheckOrEdit',val)
      window.sessionStorage.setItem('returnConfirmrow',JSON.stringify(row))
      this.$router.push({path:'/returnConfirmCheck'})
    },
    // 查看
    handleCheck(row) {
      console.log(row)
      let Url = row.batchCode;
      let clipboard = new Clipboard('.tag-read', {
        text: function() {
          return Url;
        }
      });
      clipboard.on('success', e => {
        this.$message({
          type: 'success',
          message: '复制编码'+' '+ Url+' '+'成功'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({
          type: 'warning',
          message: '该浏览器不支持自动复制!'
        })
        // 释放内存
        clipboard.destroy()
      })
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
    },
    // 删除
    handleDel(row) {
      this.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(api.transactionCommissionDel,{
          batchId:row.id,
          auditStatus:row.auditStatus,
          batchType:2
        }).then(res=>{
          console.log(res)
          this.orderList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新建批次
    handleAdd(){
      this.$router.push({path:'/returnConfirmNew'})
    },
    // 城市列表
    getCityList(){
      this.axios.post(api.CITYLIST).then(res=>{
        if(res.data.code == 200){
          this.cityList = res.data.data.cityList
        }
      })
    },
    getCityId(val){
      this.getDevList(val)
      this.devId = ''
    },
    // 楼盘列表
    getDevList(val){
      this.axios.post(api.queryAllDevList,{
        cityId:val
      }).then(res=>{
        if(res.data.code == 200){
          this.devList = res.data.data
        }
      })
    },
    // 项目列表
    orderList(){
      this.axios.post(api.getReBatchList,{
        pageNum:this.pageData.pageNum,
        pageSize:this.pageData.pageSize,
        cityId:this.cityId,
        devId:this.devId,
        auditStatus:this.auditId,
        pushFlag:this.pushFlagId,
        batchCode:this.batchCode,
        strDate:this.strDate,
        endDate:this.endDate,
        batchType:2
      }).then(res=>{
        if(res.data.code == 200){
          this.totalSize = res.data.data.total
          this.listData = res.data.data.rows
          this.listData.forEach(item => {
            item.createTime = util.getTimeString(item.createTime)
            item.brokerageAmountPaid = util.formatMoney(item.brokerageAmountPaid)
          });
        }
      })
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.orderList()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.orderList();
    },
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
  .returnConfirm {
    .block{
      margin-top :20px;
    }
  }
</style>
